@extends('layout.list')

@section('title', '首页')



@section('content')

  <div class="top_wrap"> 
   <div class="top_bnr"> 
    <ul  class="apple">
    @foreach($play as $k=>$v) 
     <li><img src="{{$v->img}}" width="100%"></li>
    @endforeach 
    </ul>
    <ul class="num">
      <li class="on"></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <div class="btn btn_l">&lt;</div>
    <div class="btn btn_r">&gt;</div>
   </div>
       <script type="text/javascript" src="/homeHTML/jquery-1.8.3.min.js"></script>
      <script type="text/javascript">
      //定义全局变量
      var i = 0;
      //第一步 先克隆图片
      var cloneimg = $('.top_bnr .apple li').first().clone();
      //第二步
      $('.top_bnr .apple').append(cloneimg);
      //获取图片个数
      var length = $('.top_bnr .apple li').length;

      //绑定单击事件
      $('.top_bnr .btn_l').click(function(){
        //图片移动
        moveL();
      })
      //绑定单击事件
      $('.top_bnr .btn_r').click(function(){
        //图片移动
        moveR();
      })

      //启动定时器
      var inte = setInterval(moveR,3000);

      //鼠标悬停效果
      $('.top_bnr').hover(function(){
        //清除定时器
        clearInterval(inte);
      },function(){
        //启动
        inte = setInterval(moveR,3000);
      })

      //给小圆点绑定鼠标划入事件
      $('.top_bnr .num li').hover(function(){
        //获取当前的索引
        var index = $(this).index();
        i = index;
        newLeft = i*960;
        $('.top_bnr .apple').animate({left:-newLeft+'px'},10);
        $('.top_bnr .num li').eq(i).addClass('on').siblings().removeClass('on');
      })


      //封装向右移动的方法
      function moveR(){
        i++;
        //判断越界
        if(i == length){
          // i=0;
          //第三步 用css快速把位置跳到0

          $('.top_bnr .apple').css({left:0});
          i = 1;
        }
        //计算left
        var newLeft = i*960;
        //设置样式

        $('.top_bnr .apple').animate({left:-newLeft+'px'},10);
        //设置圆点
        if(i == length-1){
          $('.top_bnr .num li').eq(0).addClass('on').siblings().removeClass('on');
        }else{
          $('.top_bnr .num li').eq(i).addClass('on').siblings().removeClass('on'); 
        }
      }

      //封装向左移动的方法
      function moveL(){
        i--;
        //判断越界
        if(i == -1){
          // i = length-1;
          $('.top_bnr .apple').css({left:-(length-1)*960});
          i = length-2;
        }
        //计算left
        var newLeft = i*960;
        //设置样式
        $('.top_bnr .apple').animate({left:-newLeft+'px'},10);
        $('.top_bnr .num li').eq(i).addClass('on').siblings().removeClass('on');
      }
      </script>
   <div class="top_box"> 

    
    <div class="attr_box"> 
     <ul class="sec_attr">
     @foreach($res as $k=>$v) 
      <li class="list"> 
       <div class="list_cont"> 
        <h3 class="nav_tle"> <a href="{{url('/goods/list')}}/{{$v->sorid}}" target="_blank">{{$v->sorname}}</a> </h3> 
        <p class="listP"> 
        @foreach($v->sub as $kk=>$vv) 
        <a href="{{url('/goods/list')}}/{{$vv->sorid}}" target="_blank">{{$vv->sorname}}</a>
        @endforeach 
        </p> 
       </div>
        </li> 
      @endforeach
     </ul> 
    </div> 
 
    <div class="bnr_box"> 
     <ul class="pic_attr">
     @foreach($fours as $k=>$v) 
       @foreach($v->sub as $k=>$vv) 
        <li><a href="{{url('/goods/list')}}/{{$vv->sorid}}" target="_blank"><img src="{{$vv->pic}}" width="182" height="145"/></a></li>
       @endforeach 
     @endforeach 
     </ul> 
    </div> 
   </div>
  </div>
  <!-- END -->
  <!-- START NEW-->
  <div class="auto_wrap" style="margin-top:154px"> 
   <!-- 今日新款发布 --> 
   <!--			--> 
   <!-- 正在流行与潮搭 --> 
   <div class="module fashion"> 
    <div class="tit"> 
     <h2> 正在流行 <span class="subtit">流行元素 权威榜单</span> </h2> 
     <div class="operate">
       &nbsp; 
     </div> 
    </div> 
    <div class="cont">
    @foreach($zeros as $k=>$v)
      @foreach($v->sub as $kk=>$vv)
       <a target="_blank" href="{{url('/goods/list')}}/{{$vv->sorid}}"> <img src="{{$vv->pic}}"/> </a>
      @endforeach 
    @endforeach 
    </div> 
   </div> 
   <!-- 新品精选 --> 
   <div class="module fashion_new"> 
    <div class="tit"> 
     <h2> 新品精选 <span class="subtit">尖货来袭 要你好看</span> </h2> 
     <div class="operate"> 
     </div> 
    </div> 
    <div class="cont">

    @foreach($threes as $k=>$v)
     <div class="item"> 
      <div class="pic"> 
       <a target="_blank" href="{{url('/xiangqing/xiangqing/index')}}/{{$v->id}}"><img src="{{$v->goodpic}}" width="224" height="340"/></a> 
      </div> 
      <div class="desc"> 
       <div> 
        <span class="price">￥{{$v->price}}</span> 
       </div> 
       <div class="tit"> 
        <a target="_blank" href="{{url('/xiangqing/xiangqing/index')}}/{{$v->id}}"> {{$v->goodname}} </a> 
       </div> 
      </div> 
     </div>
    @endforeach
   </div> 
  </div>
  </div>
@endsection